<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<% 
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>网络信访统计分析</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   		<meta http-equiv="X-UA-Compatible" content="IE=9" />
   		<%@ include file="../../common/Admin-list.jsp"%>    	     	  
     	<link rel="stylesheet" type="text/css" href="../Themes/default/css/netComplaint.css"/>     
    	<script src="<%=bpath %>/Scripts/echarts/build/dist/echarts.js"></script>
    	<script src="<%=bpath %>/Scripts/echarts/build/dist/Charts.js"></script>
    	<script src="<%=bpath %>/Scripts/echarts/build/dist/jqbar.js"></script>  
    	<script src="<%=bpath %>/Scripts/echarts/build/dist/theme/macarons.js"></script>
    	<script src="<%=bpath %>/Scripts/echarts/build/dist/theme/roma.js"></script>    
    	
     	<link rel="stylesheet" type="text/css" href="<%=bpath %>/Scripts/echarts/build/dist/demo.css"/>
     	<link rel="stylesheet" type="text/css" href="<%=bpath %>/Scripts/echarts/build/dist/jqbar.css"/>   
     	<script type="text/javascript">
			//为模块加载器配置echarts路径			
			require.config({
		        paths: {
		            echarts: '<%=bpath %>/Scripts/echarts/build/dist'
		        }
		    });				   
			//动态加载echarts为后续回调函数使用做准备。				
            require([
                    'echarts', 
                    'echarts/theme/macarons',   
                    'echarts/theme/roma',   
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/pie',
                    'echarts/chart/funnel',
                    'echarts/chart/treemap' // 使用柱状图就加载bar模块，按需加载
                ],DrawCharts);    
			
            function DrawCharts(ec) {
                FunDraw1(ec);
                FunDraw2(ec);
                FunDraw3(ec);
            }
	           
            //图表1
           function FunDraw1 (ec) { //编写回调函数
		       	// 基于准备好的dom，初始化echarts图表, 第二个参数可以指定前面引入的主题
		        var myChart = ec.init(document.getElementById('chart1'), 'macarons');
		        myChart.showLoading({text: "图表数据正在努力加载..."});	                
		       	var  option = {
					    title : {
					        text: '网络信访案件趋势图'    					       
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['总数']
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: false, readOnly: false},
					            magicType : {show: true, type: ['line', 'bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'category',
					            boundaryGap : false,
					            data : []
					        }
					    ],
					    grid: { // 控制图的大小，调整下面这些值就可以，
	   			             x: 60,
	   			             x2: 10,
	   			             y2:40
	   			            
	   			        },
					    yAxis : [
					        {
					            type : 'value',
					            axisLabel : {
					                formatter: '{value} 件'
					            }
					        }
					    ],
					    series : []
					};	         
		       		myChart.setOption(option);
		       	  	//通过Ajax获取数据
		            $.ajax({
		                type: "post",
		                async: false, //同步执行
		                url: "../advisoryMsgController/chart1Analysis.json",
		                dataType: "json", 	                       
		                success: function(data) {
		                	if(data!=null&&data!=""){    	
		                		myChart.hideLoading();                          	                                
		                        // 填入数据
		                        myChart.setOption({
		                        	legend: {
		     					        data:['总数','已回复','待回复']
		     					    },
		                            xAxis: [{
		                            	 data: eval("["+data.time_list+"]")
		                            }],
		                            series: [{
							            name:'总数',
							            type:'line',									            
							            data:eval("["+data.total+"]"),
							            markPoint : {
							                data : [
							                    {type : 'max', name: '最大值'}									                   
							                ]
							            },
							            markLine : {
							                data : [
							                    {type : 'average', name: '平均值'}
							                ]
							            }
							        },{
							            name:'已回复',
							            type:'line',
							            data:eval("["+data.replyTotal+"]")									          
							        },{
							            name:'待回复',
							            type:'line',
							           // itemStyle: {normal: {color:'rgba(243,164,68,1)',lineStyle:{color:'rgba(243,164,68,1)'}}},
							            data:eval("["+data.waitReply+"]")									           
							        }]
		                        }); //end
		                    }
		                },
		                error: function(errorMsg) {
		                    alert("图表请求数据失败啦!");
		                }
		            });	              
		        	            
		            window.onresize = myChart.resize;
                }
	            
	           function FunDraw2 (ec) { //编写回调函数              
	           		var myChart = ec.init(document.getElementById('chart2'),'macarons');
	                myChart.showLoading({text: "图表数据正在努力加载..."});	                
               		var option = {
	   					    title : {
	   					        text: '各地区网络信访案件概况'    					       
	   					    },
	   					    tooltip : {
	   					        trigger: 'axis'
	   					    },
	   					    legend: {
	   					        data:['总数']
	   					    },
	   					    toolbox: {
	   					        show : true,
	   					        feature : {
	   					            mark : {show: false},
	   					            dataView : {show: false, readOnly: false},
	   					            magicType : {show: true, type: ['line', 'bar']},
	   					            restore : {show: true},
	   					            saveAsImage : {show: true}
	   					        }
	   					    },
	   					    calculable : true,	   					
	   					    xAxis : [{
	   					            type : 'category',	
		   					        axisLabel:{
		   	                           	interval:0,
		   	                         	rotate:45,
		   	                         	margin:2,
		   	                         	textStyle:{		   	                         	 	
		   	                          		color: '#222'		   	                             	
		   	                         	}
	   					        	},
	   					            data : []
	   					        },{
	   					         type : 'category',
	   					         axisLine: {show:false},
	   					         axisTick: {show:false},
	   					         axisLabel: {show:false},
	   					         splitArea: {show:false},
	   					         splitLine: {show:false},
	   					      	 data : []
	   					     }],
		   					grid: { // 控制图的大小，调整下面这些值就可以，
		   			             x: 60,
		   			             x2: 10,
		   			             y:  50,
		   			             y2: 75,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
		   			        },
	   					    yAxis : [
	   					        {
	   					            type : 'value',
	   					            axisLabel : {
	   					                formatter: '{value} 件'
	   					            }
	   					        }
	   					    ],
	   					    series : []
	   					};	         
               		myChart.setOption(option);
               	  	//通过Ajax获取数据
	                    $.ajax({
	                        type: "post",
	                        async: false, //同步执行
	                        url: "../advisoryMsgController/chart2Analysis.json",
	                        dataType: "json", 	                       
	                        success: function(data) {
	                        	if(data!=null&&data!=""){    	
	                        		myChart.hideLoading();                          	                                
	                                // 填入数据
	                                myChart.setOption({
	                                	legend: {
	             					        data:['总数','已回复','待回复']
	             					    },
	                                    xAxis: [{
	                                    	 data: eval("["+data.time_list+"]")
	                                    },{
	                                    	data: eval("["+data.time_list+"]")
	                                    }],
	                                    series: [{
									            name:'总数',
									            type:'bar',	
									            xAxisIndex:1,	
									            itemStyle: {normal: {label:{show:true}}},
									            data:eval("["+data.total+"]")
									        },{
									            name:'已回复',
									            type:'bar',	
									            itemStyle: {normal: {color:'rgba(191,173,226,1)', label:{show:true,textStyle:{color:'#ffffff'}}}},
									            data:eval("["+data.replyTotal+"]")									          
									        },{
									            name:'待回复',
									            type:'bar',
									            itemStyle: {normal: {color:'rgba(243,164,68,1)', label:{show:true,textStyle:{color:'#ffffff'}}}},
									            data:eval("["+data.waitReply+"]")									           
									        }]
	                                });//end		                                
	                            
	                            }
	                        },
	                        error: function(errorMsg) {
	                            alert("图表请求数据失败啦!");
	                        }
	                    });	                  
	                	            
	                    window.onresize = myChart.resize;
	                }	 
	           
	           function FunDraw3 (ec) { //编写回调函数              
	           		var myChart = ec.init(document.getElementById('chart3'),'macarons');
	                myChart.showLoading({text: "图表数据正在努力加载..."});	
	                var option = {
	                	    title : {
	                	        text: '污染类型分布',	                	       
	                	        x:'50'
	                	    },
	                	    tooltip : {
	                	        trigger: 'item',
	                	        formatter: "{a} <br/>{b} : {c}件 ({d}%)"
	                	    },
	                	    legend: {
	                	    	show:false,
	                	        x : 'right',
	                	        y : 'top',
	                	        data:[]
	                	    },
	                	    toolbox: {
	                	        show : true,
	                	        feature : {
	                	            mark : {show: false},
	                	            dataView : {show: false, readOnly: false},
	                	            magicType : {
	                	                show: true, 
	                	                type: ['pie', 'funnel']
	                	            },
	                	            restore : {show: true},
	                	            saveAsImage : {show: true}
	                	        }
	                	    },
	                	    calculable : true,
	                	    series : [       
	                	        {
	                	            name:'',
	                	            type:'pie',
	                	            radius : ['10%', '50%'],/*内半径 外半径*/
	                	            center : ['48%', '52%'],
	                	            roseType : 'area',	                	           
	                	            x: '50%',               // for funnel
	                	            max: 40,                // for funnel
	                	            sort : 'ascending',     // for funnel
	                	            data:[             	               
	                	            ]
	                	        }
	                	    ]
	                	};	                
              		
              	  	//通过Ajax获取数据
	                    $.ajax({
	                        type: "post",
	                        async: false, //同步执行
	                        url: "../advisoryMsgController/chart3Analysis.json",
	                        dataType: "json", 	                       
	                        success: function(data) {
	                        	if(data!=null&&data!=""){    	
	                        		myChart.hideLoading(); 	                        		
	                        		
	                        		var timeList=data.time_list.split(',');   
	                        		var totalList=data.total.split(',');	                        		
	                        		for(var i=0;i<timeList.length;i++){
	                        			 var arr={value :totalList[i], name:timeList[i]} ;
	                        			 option.series[0].data.push(arr);
	                        		}
	                        		option.legend.data=eval("["+data.time_list+"]");	                        		
	                        		myChart.setOption(option);	                        		
	                            }
	                        },
	                        error: function(errorMsg) {
	                            alert("图表请求数据失败啦!");
	                        }
	                    });	                  
	                	            
	                    window.onresize = myChart.resize;
	                }
	            
	            
		</script>
	</head>
	<body> 
		<div class="main">
			<!-- 总体概况 -->
			<div class="top">		
				<!-- 新增 趋势变化图 -->
				<div class="topLeft" id="chart1">			
				</div>	
				<div class="topRight">
					<span style="float:left;font-size:18px; margin:0;padding:0;color:#008acd;margin-left:30px;">整体概况</span>
					<!-- 
					<div class="nowTime">
						<jsp:useBean id="now" class="java.util.Date" />
	  					<fmt:setLocale value="zh_CN"/>
						<a href="#" class="leftA">
							<p class="mp">
								<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="MM月"/>
							</p>
							<p class="dayP">
								<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="dd"/>
								<span>
									<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="E"/>
								</span>
							</p>
						</a>
						<a href="#" class="rightA">
							<p class="p1">
								<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="a"/>	
							</p>
							<p class="timeP">
								<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="hh:mm"/>						
							</p>
						</a>				
					</div> -->
					<div class="topTitle">
						<div class="news">
							<p class="pTitle">合计</p>					
							<p class="pNum">${data.statistics.total}<span>件</span></p>
						</div>				
						<div class="news bg1" style="margin-left:0px;">
							<p class="pTitle">已回复</p>	
							<p class="pNum">${data.statistics.replyTotal}<span>件</span></p>							
						</div>				
						<div class="news bg2">
							<p class="pTitle">待回复</p>	
							<p class="pNum">${data.statistics.waitReply}<span>件</span></p>							
						</div>				
						<div class="news bg3"  style="margin-left:0px;">
							<p class="pTitle">超时</p>	
							<p class="pNum">${data.statistics.overtimeTotal}<span>件</span></p>							
						</div>									
					</div>				
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>	
			<!-- 区县和类型 -->
			<div class="chartTwo">
				<!-- 个区域 分布图-->
				<div class="chartTwoLeft" id="chart2">			
				</div>
				<!-- 类型 分布图-->
				<div class="chartTwoRight" id="chart3">			
				</div>	
			</div>						
		</div>
	</body>
</html>